<template>
    <div class="member-rebate-detail">
        <van-search v-model="search" placeholder="购买者/电话" />

        <!-- <Card v-for="(item, index) in list"
            :key="index"
            :detail="item" /> -->
        <CardNew v-for="(item, index) in list"
            :key="index"
            :detail="item" />

        <ListFooter :loaded="wrap.loaded" :req="wrap.req" />
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
// import Card from '@/features/member/card.vue';

import CardNew from '@/features/member/cardNew.vue';
import store from '@/store';
import { EMPTY_LIST } from '@/lib/constant';
import { WatchDelay } from '@/lib/utils';

Component.registerHooks([
    'beforeRouteEnter',
]);

@Component({
    name: 'MemberRebateDetail',
    components: {
        // Card,
        CardNew
    },
})
export default class MemberRebateDetail extends Vue {
    public search = '';

    public get wrap() {
        const key = ['undefined', 'undefined', 'undefined', 'undefined', this.search].join('_');
        return store.state.user.rebateDetailListMap[key] || EMPTY_LIST;
    }
    public get list() {
        return this.wrap.list;
    }

    @WatchDelay('search', 500)
    @Watch('search')
    public onSearch() {
        this.getList(0);
    }

    public getList(offset = this.list.length) {
        store.dispatch('user/getRebateDetailList', {
            offset,
            count: 10,
            search: this.search,
        });
    }
    public onReachBottom() {
        this.getList();
    }

    public created() {
        this.getList();

        window.addEventListener('reachbottom', this.onReachBottom);
    }
    public beforeDestroy() {
        window.removeEventListener('reachbottom', this.onReachBottom);
    }
}
</script>
